<template>
  <div class="box">
    <canvas style="width: 100%; height: 100%;" canvas-id="firstCanvas"></canvas>
    <div class="test"></div>
  </div>
</template>

<script>
  export default {
    mounted() {
      var ctx = wx.createCanvasContext('firstCanvas')
      // const grd = ctx.createLinearGradient(0, 0, 180, 0)
      // grd.addColorStop(0, 'red')
      // grd.addColorStop(1, 'blue')

      ctx.arc(100, 75, 50, 0, 2 * Math.PI)
      ctx.setFillStyle('#EEEEEE')
      ctx.fill()

      ctx.beginPath()
      ctx.moveTo(40, 75)
      ctx.lineTo(160, 75)
      ctx.moveTo(100, 15)
      ctx.lineTo(100, 135)
      ctx.setStrokeStyle('#AAAAAA')
      ctx.stroke()

      ctx.setFontSize(12)
      ctx.setFillStyle('black')
      ctx.fillText('0', 165, 78)
      ctx.fillText('0.5*PI', 83, 145)
      ctx.fillText('1*PI', 15, 78)
      ctx.fillText('1.5*PI', 83, 10)

      ctx.beginPath()
      ctx.arc(100, 75, 2, 0, 2 * Math.PI)
      ctx.setFillStyle('lightgreen')
      ctx.fill()

      ctx.beginPath()
      ctx.arc(100, 25, 2, 0, 2 * Math.PI)
      ctx.setFillStyle('blue')
      ctx.fill()

      // const grd = ctx.createCircularGradient(100, 75, 50)
      // grd.addColorStop(0, 'red')
      // grd.addColorStop(1, 'blue')

      const grd = ctx.createLinearGradient(100, 25, 100, 125)
      grd.addColorStop(0, '#2AC3FF')
      grd.addColorStop(1, '#3364FF')

      ctx.beginPath()
      ctx.arc(100, 75, 50, 1.5 * Math.PI, 1 * Math.PI)
      ctx.lineWidth = 12
      // ctx.setStrokeStyle(grd)
      ctx.strokeStyle = grd
      ctx.lineCap = 'round'
      ctx.stroke()
      // ctx.setFillStyle('red')
      // ctx.fillRect(10, 10, 150, 75)
      ctx.draw()
      // console.log(ctx)
      // context.setStrokeStyle('#00ff00')
      // context.setLineWidth(5)
      // context.rect(0, 0, 200, 200)
      // context.stroke()
      // context.setStrokeStyle('#ff0000')
      // context.setLineWidth(2)
      // context.moveTo(160, 100)
      // context.arc(100, 100, 60, 0, 2 * Math.PI, true)
      // context.moveTo(140, 100)
      // context.arc(100, 100, 40, 0, Math.PI, false)
      // context.moveTo(85, 80)
      // context.arc(80, 80, 5, 0, 2 * Math.PI, true)
      // context.moveTo(125, 80)
      // context.arc(120, 80, 5, 0, 2 * Math.PI, true)
      // context.stroke()
      // context.draw()
    }
  }
</script>

<style>
  .box {
    height: 50%;
  }
  .test{
    margin: 100px auto;
    height: 100px;
    width: 100px;
    background-color: #fff;
    border-radius: 100%;
    border-width: 50px;
    border-color: aqua;
    border-style: solid;
    border-image:  linear-gradient(red, blue) 30 30；
  }
</style>
